<template>
  <div class="My">
    <!-- 头部 -->
    <MyHeader :userInfo="userInfo" />
    <!-- 我的订单 -->
    <div class="my_order">
      <ul>
        <li @click="$router.push('/myorder/0')">
          <div>
            <img src="@/assets/quanbudingdan.png" />
            <p>全部订单</p>
          </div>
        </li>
        <li @click="$router.push('/myorder/1')">
          <div>
            <img src="@/assets/daizhifu.png" />
            <p>待支付</p>
          </div>
        </li>
        <li @click="$router.push('/myorder/2')">
          <div>
            <img src="@/assets/daifahuo.png" />
            <p>待发货</p>
          </div>
        </li>
        <li @click="$router.push('/myorder/3')">
          <div>
            <img src="@/assets/daihouhuo.png" />
            <p>待收货</p>
          </div>
        </li>
        <li @click="$router.push('/myorder/4')">
          <div>
            <img src="@/assets/yiwancheng.png" />
            <p>已完成</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 功能键 -->
    <van-cell-group class="My_key">
      <van-cell
        title="我的资料"
        @click="$router.push('/myInformation')"
        is-link
      />
      <van-cell title="加入分销" @click="goToGouka" is-link />
      <van-cell title="钱包" @click="$router.push('/myWallet')" is-link />
      <van-cell
        title="我的团队"
        @click="$router.push('/mySubordinates')"
        is-link
      />
      <van-cell
        title="收益记录"
        @click="$router.push('/revenueRecords')"
        is-link
      />
      <van-cell title="我的卡包" @click="$router.push('/myCardBag')" is-link />
      <van-cell
        title="商家入驻"
        v-if="userInfo.typ == 1"
        @click="$router.push('/businessApplication')"
        is-link
      />
      <van-cell
        title="商家入驻"
        v-if="userInfo.typ == 2"
        @click="$router.push('/businessHomepage')"
        is-link
      />
      <van-cell
        title="平台审核"
        v-if="userInfo.platform == 1"
        @click="$router.push('/toExamine')"
        is-link
      />
    </van-cell-group>
    <!-- 手机弹窗 -->
    <van-dialog v-model="show" title="手机号补充" @confirm="setUserPhone">
      <van-field
        v-model="phone"
        type="tel"
        label="手机号"
        placeholder="请输入手机号码"
      />
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import MyHeader from "@/components/MyHeader.vue";
import { Cell, CellGroup, Toast, Dialog, Field } from "vant";
Vue.use(Cell);
Vue.use(Field);
Vue.use(Dialog);
Vue.use(CellGroup);
@Component({
  components: {
    MyHeader,
  },
})
export default class My extends Vue {
  private show = false;
  private userInfo = {
    grade: 0,
  };
  private phone: string = "";

  private mounted(): void {
    this.$common.getAuthToken(this.getData);
  }
  private getData(): void {
    this.$post(`userInfo`).then((res: any) => {
      if (res.code == 0) {
        this.userInfo = res.data;
        if (res.data.grade == 3 && res.data.phone == "") {
          this.show = true;
        }
      }
    });
  }
  private goToGouka() {
    if (this.userInfo.grade == 0) {
      Toast.fail("普通用户无法购卡");
    } else {
      this.$router.push("/merchantDetails/0");
    }
  }
  private setUserPhone() {
    this.$post(`setUserPhone`, { phone: this.phone }).then((res: any) => {
      if (res.code == 0) {
        Toast("授权成功！");
      }
    });
  }
}
</script>

<style lang="scss">
.My {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  & > .My_header {
    width: 100%;
    padding: 30px;
    background-color: #fff;
    box-sizing: border-box;
    img {
      width: 126px;
      height: 126px;
      display: block;
      border-radius: 100%;
    }
    h4 {
      font-size: 36px;
      font-weight: 400;
      color: #0c0c0c;
      line-height: 2;
    }
    p {
      font-size: 24px;
      font-weight: 400;
      color: #e9c790;
      line-height: 2;
    }
  }
  & > .my_order {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px;
    margin-top: 20px;
    background-color: #fff;
    ul {
      width: 100%;
      list-style: none;
      overflow: hidden;
      padding: 20px 0;
      li {
        float: left;
        width: 20%;
        margin-bottom: 10px;
        padding: 10px 15px;
        box-sizing: border-box;
        img {
          width: 60px;
          height: 60px;
          margin: 0px auto 10px;
          display: block;
        }
        p {
          width: 100%;
          text-align: center;
          line-height: 1.5;
          font-size: 25px;
        }
      }
    }
  }
  & > .My_key {
    margin-top: 20px;
  }
}
</style>